<template>
  <div class="cartList">
    <!-- 购物车顶部导航区域 -->
    <nav-comp :back="false" title="购物车"></nav-comp>
    <!-- 购物车列表区域 -->
    <van-swipe-cell v-for="(item, index) in cartList" :key="item.id">
      <van-card
        :num="item.num"
        :price="item.price"
        desc="描述信息"
        :title="item.goodsname"
        class="goods-card"
        :thumb="$pre + item.img"
      >
        <!-- 左侧状态存储区域 -->
        <template #tags>
          <van-checkbox v-model="item.status" @click="changeOne"></van-checkbox>
        </template>
        <!-- 右下角数量操作区域 -->
        <template #footer>
          <van-button
            size="mini"
            type="info"
            @click="changeNum(1, index, item.id)"
            >-</van-button
          >
          <van-button
            size="mini"
            type="info"
            @click="changeNum(2, index, item.id)"
            >+</van-button
          >
        </template>
      </van-card>
      <template #right>
        <van-button
          square
          text="删除"
          type="danger"
          class="delete-button"
          @click="cartRemove(index, item.id)"
        />
      </template>
    </van-swipe-cell>

    <!-- 底部订单提交导航区域 -->
    <van-submit-bar :price="jisuan.countMoney*100" button-text="提交订单" @submit="onSubmit">
      <van-checkbox v-model="allStatus" @click="changeAll">全选</van-checkbox>
    </van-submit-bar>
    <div class="row"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cartList: [], //购物车数据
      allStatus: true, //全选的初始状态
    };
  },
  computed:{
    jisuan(){
        let countMoney=0;
        let countNumber=0;
        //遍历所有的购物车数据 统计status=true
        this.cartList.forEach(item=>{
            if(item.status){
                countMoney+=parseInt(item.num)*parseFloat(item.price)
                countNumber += parseInt(item.num)
            }
        })
        return {countMoney,countNumber}
    }
  },
  mounted() {
    //1.监测用户是否登录
    let userUid = this.$api.isLogin(this.$route.path);
    if (userUid != false) {
      //2.获取购物车数据
      this.getCartList(userUid);
    }
  },
  methods: {
    //获取购物车数据
    getCartList(uid) {
      this.$api
        .reqCartList({ uid })
        .then(res => {
          // console.log("1111",res)
          //1.1将数据赋值给页面
          this.cartList = res.data.list;
          //1.2遍历购物车数据 将status重写为bool
          this.cartList.forEach((item) => (item.status = true));
        })
        .catch((err) => console.log(err));
    },
    //2.单选操作
    changeOne(){
        // 2.1同步自身的状态
        // 2.2同步多选的状态 every:bool findIndex：满足条件的数据的下标
        this.allStatus = this.cartList.every(item=>item.status)
    },
    //3.全选反选
    changeAll(){
        // 3.1同步自身的状态
        // 3.2同步每一条购物车数据状态 
        this.cartList.forEach(item=>item.status=this.allStatus)
    },
    //4.数量管理
    //4.1同步页面数量
    changeNum(type,index,id){
        if(type==1){//--
            if(this.cartList[index].num==1){
                this.$toast('请左滑删除');return
            }
            --this.cartList[index].num
        }else{
            if(this.cartList[index].num==5){
                return
            }
            ++this.cartList[index].num
        }
        //4.2同步数据表中数量
        this.$api.reqCartEdit({id,type})
        .then(res=>{
            console.log(res)
        })
        .catch(err=>console.log(err))
    },

    //5.购物车数据删除操作
    cartRemove(index,id){
        this.$dialog.confirm({
                title: '温馨提示',
                message: '是否要删除？',
            })
        .then(()=>{
            //5.1用户同意删除
            this.cartList.splice(index,1)

            //5.2根据id同步数据库
            this.$api.reqCartRemove({id})
            .then(res=>{
                console.log(res)
            })
            .catch(err=>console.log(err))
        })
    },

    //6.提交确认订单
    onSubmit(){
        //6.1组装用户需要购买的商品信息
        let orderData = [];
        this.cartList.forEach(item=>{
            //将用户选中的商品存储到orderData中
            if(item.status){
                orderData.push(item)
            }
        })
        //6.2检测是否有待确认的订单数据
        if(orderData.length==0){
            this.$toast('请先选择需要购买的商品信息!');return
        }
        //6.3将确认的订单数据存储在本地缓存中 在订单确认页面展示使用
        localStorage.setItem('orderData',JSON.stringify({orderData,...this.jisuan}))
        //6.4跳转到订单确认页
        this.$router.push('/orderconfirm')
    }
  },
};
</script>

<style lang="less" scoped>
@white: 999;
.cartList {
  background: #dddd;
}

@white: white;
.goods-card {
  margin: 0;
  background-color: @white;
  margin-top: 10px;
}

.delete-button {
  height: 100%;
}

.van-card .van-checkbox {
  margin: -10px 0 0 -110px;
}

.van-submit-bar {
  bottom: 42px;
}
.row {
  margin-top: 2.1rem;
}
</style>
